<template>
  <div class="activity-apply-management">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>活动申请管理</span>
        </div>
      </template>
      <div class="content-body">
        <!-- 搜索和筛选区域 -->
        <div class="search-filter">
          <el-input 
            v-model="queryForm.activityName" 
            placeholder="请输入活动名称搜索"
            style="width: 200px; margin-right: 10px;"
            prefix-icon="Search"
            clearable
          />
          <el-input 
            v-model="queryForm.applyName" 
            placeholder="请输入申请人搜索"
            style="width: 150px; margin-right: 10px;"
            clearable
          />
          <el-button type="primary" @click="getList">搜索</el-button>
        </div>
        
        <!-- 活动申请列表 -->
        <el-table :data="tableData" style="width: 100%; margin-top: 20px;">
          <el-table-column prop="id" label="申请ID" width="80" />
          <el-table-column prop="activityName" label="活动名称" min-width="200" :show-overflow-tooltip="true" />
          <el-table-column prop="applyName" label="申请人" width="120" />
          <el-table-column prop="applyTime" label="申请时间" width="180" />
          <el-table-column prop="status" label="状态" width="100" >
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="rejectReason" label="拒绝原因" min-width="200" :show-overflow-tooltip="true" />
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="scope">
              <el-button 
                type="primary" 
                size="small" 
                @click="handleApprove(scope.row)"
                v-if="scope.row.status === '0'"
              >
                同意
              </el-button>
              <el-button 
                type="danger" 
                size="small" 
                @click="handleReject(scope.row)"
                v-if="scope.row.status === '0'"
              >
                拒绝
              </el-button>
             
            </template>
          </el-table-column>
        </el-table>
        
      </div>
    </el-card>

    <!-- 拒绝申请弹窗 -->
    <el-dialog 
      v-model="rejectDialogVisible" 
      title="拒绝申请"
      width="400px"
    >
      <el-form 
        ref="rejectFormRef" 
        :model="rejectForm" 
        :rules="rejectFormRules"
        label-width="100px"
        style="margin-top: 20px;"
      >
        <el-form-item label="活动名称" disabled>
          <el-input v-model="currentApply.activityName" disabled />
        </el-form-item>
        <el-form-item label="申请人" >
          <el-input v-model="currentApply.applyName" disabled />
        </el-form-item>
        <el-form-item label="拒绝原因" prop="rejectReason">
          <el-input
            v-model="rejectForm.rejectReason"
            type="textarea"
            :rows="4"
            placeholder="请输入拒绝原因（必填）"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="rejectDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitReject">确认拒绝</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { getActivityApplyList, handleActivityApply } from '@/request/activityApply.js'

// 搜索表单
const queryForm = ref({
  pageNum: 1,
  pageSize: 10,
  activityName: '',
  applicantName: '',
  status: ''
})


// 拒绝对话框相关
const rejectDialogVisible = ref(false)
const rejectFormRef = ref(null)
const currentApply = reactive({})
const rejectForm = reactive({
  rejectReason: ''
})

// 拒绝表单验证规则
const rejectFormRules = {
  rejectReason: [
    { required: true, message: '请输入拒绝原因', trigger: 'blur' },
    { min: 5, max: 200, message: '拒绝原因长度应在 5 到 200 个字符之间', trigger: 'blur' }
  ]
}

// 表格数据
const tableData = ref([])
const total = ref(0)

// 获取活动申请列表
const getList = () => {
  getActivityApplyList(queryForm.value).then(res => {
    tableData.value = res
    total.value = res.length
  }).catch(error => {
    console.error('获取活动申请列表失败:', error)
    ElMessage.error('获取活动申请列表失败')
  })
}
 getList()



// 根据状态获取标签类型
const getStatusType = (status) => {
  switch(status) {
    case '0': return 'info'
    case '1': return 'success'
    case '2': return 'danger'
    case '3': return 'danger'
    case '4': return 'primary'
    default: return 'default'
  }
}

// 根据状态获取文本
const getStatusText = (status) => {
  switch(status) {
    case '0': return '待处理'
    case '1': return '已同意'
    case '2': return '已拒绝'
    case '3': return '已取消'
    case '4': return '已完成'
    default: return '未知状态'
  }
}

// 同意申请
const handleApprove = (row) => {
  ElMessageBox.confirm('确定要同意该活动申请吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'success'
  }).then(() => {
    const data = {
      id: row.id,
      status: '1',
      rejectReason: ''
    }
    handleActivityApply(data).then(res => {
      ElMessage.success('已同意申请')
      getList()
    }).catch(error => {
      console.error('同意申请失败:', error)
      ElMessage.error('同意申请失败')
    })
  }).catch(() => {
    // 用户取消操作
  })
}

// 拒绝申请
const handleReject = (row) => {
  // 重置拒绝表单
  resetRejectForm()
  // 设置当前申请信息
  Object.keys(currentApply).forEach(key => {
    currentApply[key] = ''
  })
  Object.assign(currentApply, row)
  // 显示拒绝对话框
  rejectDialogVisible.value = true
}

// 提交拒绝申请
const submitReject = () => {
  rejectFormRef.value.validate((valid) => {
    if (valid) {
      const data = {
        id: currentApply.id,
        status: '2',
        remarks: rejectForm.rejectReason
      }
      handleActivityApply(data).then(res => {
        ElMessage.success('已拒绝申请')
        rejectDialogVisible.value = false
        resetRejectForm()
        getList()
      }).catch(error => {
        console.error('拒绝申请失败:', error)
        ElMessage.error('拒绝申请失败')
      })
    }
  })
}

// 重置拒绝表单
const resetRejectForm = () => {
  if (rejectFormRef.value) {
    rejectFormRef.value.resetFields()
  }
  rejectForm.rejectReason = ''
}

</script>

<style scoped>
.activity-apply-management {
  padding: 0px;
}

.search-filter {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>